<template>
	<ul class="list">
		<li class="item"  v-for="item of letters"
		 :key="item"
		 :ref="item"
		 @click="handleLetterClick"
		 @touchstart="handleTouchStart"
		 @touchmove="handleTouchMove"
		 @touchend="handleTouchEnd"
		 >
		{{item}}
		</li>
	</ul>
</template>
<script>
export default{
	name:'CityAlphabet',
	props:{
		cities:Object
	},
	computed: {
		letters () {
			const letters=[]
			//let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。
			for (let i in this.cities){
				letters.push(i)
			}
			return letters
			
		}
	},
	data() {
		return{
			touchStatus: false,
			startY:0,
			timer:null
		}
		updated ()
		{
			this.startY=this.$refs['A'][0].offsetTop
		}
	},
	methods:{
		handleLetterClick (e){
			this.$emit('change',e.target.innerText)
		},
		handleTouchStart (){
			this.touchStatus=true
		},
		handleTouchMove (e){
			if(this.touchStatus){
				if(this.timer){//timer函数截留提高性能
					clearTimeout(this.timer)
				}
				this.timer=setTimeout(()=>{
					const touchY=e.touches[0].clientY-79//79是上面绿框的高度
					const index=Math.floor(touchY-this.startY)/20
					if(index>= 0 && index<this.letters.length)
					{
					this.$emit('change',this.letters[index])	
					}
				},16)
			}
		},
		handleTouchEnd (){
			this.touchStatus=false
		}
	}
}
</script>
<style lang="stylus" scoped>
	@import '~styles/varibles.styl'	
	.list
		position:absolute
		right:0
		top:1.58rem
		bottom:0
		width:.4rem
		display:flex
		flex-direction:column
		justify-content:center
		position:absolute
		.item
			line-height:.4rem
			text-align:center
			color:$bgColor
		
		
		
		
</style>
